<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://s2.wandougongzhu.cn/h5/css/user/reset_b968ec.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/CSS/wdgz.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="${pageContext.request.contextPath }/statics/JS/jquery-1.8.3.js"></script>
</head>
<body>
<div class="x-header x-header-gray border-1px-bottom">
    <a href="javascript:history.go(-1)" class="x-header-btn x-header-goback"></a>
    <div class="x-header-title">
        <h3>重置密码</h3>
    </div>
    <div class="x-header-btn"></div>
</div>


<div id="passport">
    <div class="x-passport">

            <div class="ipt-box border-1px-bottom">
                <input placeholder="请输入您注册过的手机号" name="phone" type="number" id="phone">
                <button class="verify-btn" type="button" disabled="">获取短信验证码</button>
            </div>
            <div class="ipt-box border-1px-bottom">
                <input placeholder="验证码" name="vcode" type="number" id="yzm">
            </div>
            <div class="ipt-box border-1px-bottom">
                <input placeholder="新密码" name="pwd" type="password" id="pwd">
                <button class="eye-btn" type="button"></button>
            </div>

            <button type="submit" class="submit-btn">完成</button>

    </div>
</div>
<div class="x-qtip" style="display: none;"><div class="x-qtip-body"><div class="x-qtip-icon"><i></i></div><div class="x-qtip-msg">请输入手机号</div></div></div>
<div class="x-dialog" style="display: block;"> <div class="x-dialog-mask"></div> <div class="x-dialog-box">  <div class="x-dialog-body">
    <form>
        <div class="valide-code-tip">需要输入图片验证码</div>
        <div class="valide-code-box">
            <input placeholder="请输入验证码">
            <img src="https://m.wandougongzhu.cn/user/validateCode?t=11505101858422" id="pic" "="">
        </div>
    </form>

</div>  <div class="x-dialog-btn-panel"> <button class="x-dialog-btn">取消</button><button class="x-dialog-btn border-1px-left x-dialog-btn-hl">确定</button> </div> </div> </div>
</body>
<script>
    $(
        function () {
            /*验证输入*/
            $(".submit-btn").click(function () {
                var phoneReg=/^1[13578]\d{9}$/;
                var pwdReg = /^[a-zA-Z]\w{5,17}$/;
                var phone = $("#phone").val().length;
                var yzm = $("#yzm").val().length;
                var pwd = $("#pwd").val().length;

                if(phone===0&&(yzm===0||yzm!==0)&&(pwd===0||pwd!==0)){
                    $(".x-qtip").show().delay(2000).fadeOut();
                }else　if((phone!==0)&&!phoneReg.test($("#phone").val())){
                    $(".x-qtip .x-qtip-msg").html("输入的手机号码不正确");
                    $(".x-qtip").show().delay(2000).fadeOut();
                }else　if(phone!==0&&(pwd===0||pwd!==0)&&yzm===0){
                    $(".x-qtip .x-qtip-msg").html("请输入验证码");
                    $(".x-qtip").show().delay(2000).fadeOut();
                }else if(yzm<4&&phone!==0){
                    $(".x-qtip .x-qtip-msg").html("验证码必须为四位数字");
                    $(".x-qtip").show().delay(2000).fadeOut();
                }else　if(phone!==0&&pwd===0&&yzm!==0){
                    $(".x-qtip .x-qtip-msg").html("请输入密码");
                    $(".x-qtip").show().delay(2000).fadeOut();
                }else if(!pwdReg.test($("#pwd").val())){
                    $(".x-qtip .x-qtip-msg").html("以字母开头，长度在6-18之间，只能包含字母，数字和下划线");
                    $(".x-qtip").show().delay(4000).fadeOut();
                    return false;
                }
            });

            /*密码可见*/
            $(".eye-btn").click(function () {
                $(".eye-btn").toggleClass("eye-visible")
            });
            /* 手机号码满11数 */
            $("#phone").keyup(function () {
                if(($("#phone").val().length)===11){
                    $(".verify-btn").removeAttr("disabled");
                }else{
                    $(".verify-btn").attr("disabled","");
                }
            });

            /*验证码窗口关闭*/
            $(".x-dialog-btn").click(function () {
                $(".x-dialog").css("display","none");
            });

            /*获取验证码内容*/
            $(".x-dialog").hide();
            $(".verify-btn").click(function () {
                $(".x-dialog").show();
            })
        });

    /*点击验证码图片刷新*/
      var myimg = document.getElementById("pic");
      myimg.onclick=function () {
        var now = new Date();
        myimg.src = "https://m.wandougongzhu.cn/user/validateCode?t=1" + now.getTime();
    };
</script>
</html>